<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="../AngularJS/angular-1.5.0/angular.min.js"></script>
		<script src="../jQuery/jQuery-2.1.4.min.js"></script>
		<title></title>
	</head>
	<body ng-app="app" ng-contryller="ctrl">
		<add minor class="col-md-2 col-md-offset-3">
          <div >次数: {{ count }}</div>
          <figure></figure>
      </add>
	</body>
	<script>
		var model = angular.module("app",[]);
		
		
		
		model.directive("figure",function(){
        return{
            restrict:'ECMA',
            template:'<button id="add" ng-click="test()" class="btn btn-default">增加</button>'+
                     '<button id="minor" class="btn btn-danger">减少</button>'+
                     '<div>{{ figureCtrl.temp }}</div>',
//          require:['?^add','?^minor'],
            require:'^add',
            controller:function(){
                this.temp="这个属性被隔离开，可通过controllerAs创建的动态对象调用";
            },
//          controllerAs:'figureCtrl',
            link:function(scope,element,attrs,resultCtrl){
//          	resultCtrl.addCount();
				scope.test = function (){
					console.log(resultCtrl)
					resultCtrl.addCount()
				}
			  
			
//			element.find("#add").on("click",resultCtrl[0].addCount);
//			angular.element(document.querySelector('#minor')).on("click",resultCtrl[1].reduceCount);
			
//          angular.element(document.querySelector('#minor')).on('click',resultCtrl[1].reduceCount);
//          angular.element(document.querySelector('#add')).on('click',resultCtrl[0].addCount);
               
        }
        }
   });
   
   model.directive("minor",function(){
        return{
            restrict:'ECAM',
            controller:function($scope){
                this.reduceCount=function(){
                    $scope.$apply(function(){
                        $scope.count--;
                    })
                }
               
            }
        }
   });
   model.directive("add",function(){
        return{
            restrict:'ECMA',
            controller:function($scope){
                $scope.count=0;
                this.addCount=function(){
                	console.log("add")
                    $scope.$apply(function(){
                        $scope.count++;
                    })
                }
            }
        }
   });
   
   
   
	</script>
</html>
